En HTML5 , la fonction canvas drawImage() est utilis茅e pour afficher une image ou une vid茅o sur canvas. Cette fonction peut 锚tre utilis茅e pour afficher l’image enti猫re ou juste une petite partie de l’image. Mais, l’image doit d’abord 锚tre charg茅e pour la charger plus loin sur la toile.聽
Syntaxe:聽
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);Valeurs des param猫tres聽:聽聽
img : Il indique l’image ou la vid茅o 脿 dessiner sur la toile.x : Indique la coordonn茅e x o霉 l’image doit 锚tre plac茅e.y: Indique la coordonn茅e y o霉 l’image doit 锚tre plac茅e.swidth : C’est un param猫tre facultatif et indique la largeur de l’image d茅coup茅e.sheight : C’est un param猫tre facultatif et indique la hauteur de l’image d茅coup茅e.sx : C’est un param猫tre facultatif et indique la coordonn茅e x o霉 commencer le d茅coupage.sy: C’est un param猫tre facultatif et indique la coordonn茅e y o霉 commencer le d茅coupage.width : C’est un param猫tre facultatif et indique la largeur de l’image 脿 utiliser.hauteur : C’est un param猫tre facultatif et indique la hauteur de l’image 脿 utiliser.Exemple:聽聽
HTML聽聽聽聽聽聽聽聽聽聽聽聽聽HTML | canvas drawImage() Method聽聽聽聽聽聽聽聽聽聽Image:
聽聽聽聽聽Canvas:
聽聽聽聽聽聽聽聽聽聽聽聽聽聽Your browser is not supported聽聽聽聽聽聽聽聽for HTML5 canvas tag.聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽window.onload = function () {聽聽聽聽聽聽聽聽聽聽聽聽var c = document.getElementById("myGFGCanvas");聽聽聽聽聽聽聽聽聽聽聽聽var ctx = c.getContext("2d");聽聽聽聽聽聽聽聽聽聽聽聽var img = document.getElementById("GFG");聽聽聽聽聽聽聽聽聽聽聽聽ctx.drawImage(img, 20, 20);聽聽聽聽聽聽聽聽};聽聽聽聽聽Production:聽
Post automatically translated
Article written by utkarsh_kumar and translated by Acervo Lima. The original can be accessed here. Licence: CCBY-SA